<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const earthRadius = 100; // 地球半径
const moonRadius = 27; // 月球半径
const distance = 300; // 地球到月球的距离
let angle = 0; // 地球和月球的初始角度
function render() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制地球
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, earthRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();

  // 计算月球的位置
  const moonX = canvas.width / 2 + distance * Math.cos(angle);
  const moonY = canvas.height / 2 + distance * Math.sin(angle);

  // 绘制月球
  ctx.beginPath();
  ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'gray';
  ctx.fill();

  // 更新角度
  angle += 0.01;

  // 循环调用render函数
  requestAnimationFrame(render);
}

// 开始渲染
render();

</script>
</html>